<template>
  <div class="indexStyle">
    <div>
  <el-menu  class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1" @click.native="()=>{$router.push({name:'index'})}">分类</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">已投标</el-menu-item>
    <el-menu-item index="2-2">进行中</el-menu-item>
    <el-menu-item index="2-3">已完成</el-menu-item>
    <el-menu-item index="2-4">已收藏</el-menu-item>
<!--    <el-submenu index="2-4">-->
<!--      <template slot="title">选项4</template>-->
<!--      <el-menu-item index="2-4-1">选项1</el-menu-item>-->
<!--      <el-menu-item index="2-4-2">选项2</el-menu-item>-->
<!--      <el-menu-item index="2-4-3">选项3</el-menu-item>-->
<!--    </el-submenu>-->
  </el-submenu>
    <el-menu-item index="3" @click="()=>{$router.push({name:'ranking'})}">排名</el-menu-item>
  <el-menu-item index="4" @click.native="()=>{dialogVisible = true}">投诉</el-menu-item>
<div class="logo"><img src="@/assets/2.jpg" alt=""></div>
<el-menu-item index="5" popper-class="test" style="left:72%">
<el-dropdown trigger="click" >
  <span class="el-dropdown-link">
    nihao
  </span>
  <el-dropdown-menu slot="dropdown" >
    <el-dropdown-item @click.native="peopleCenterFunc">个人中心</el-dropdown-item>
    <el-dropdown-item @click.native="returnfunc">退出登录</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>
</el-menu-item>
<!-- <div class="name">nihao</div> -->
</el-menu>
    </div>

<!--    投诉弹出框-->
    <el-dialog
      title="投诉"
      :visible.sync="dialogVisible"
      width="50%"
   >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" class="demo-ruleForm">
      <el-form-item label="投诉的公司" prop="companyName">
        <el-select v-model="ruleForm.companyName" filterable placeholder="请选择投诉公司">
          <!--          <el-option label="区域一" value="shanghai"></el-option>-->
          <!--          <el-option label="区域二" value="beijing"></el-option>-->
          <el-option v-for="(item,index) in companyList" :key="index">{{item}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请选择涉及的项目" filterable prop="companyProject">
        <el-select v-model="ruleForm.companyProject" placeholder="请选择活动区域">
          <el-option v-for="(item,index) in companyProject" :key="index">{{item}}</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="过程描述" prop="companyDescribe" >
        <el-col :span="12">
        <el-input type="textarea" v-model="ruleForm.companyDescribe" ></el-input>
        </el-col>
      </el-form-item>

    </el-form>
      <div slot="footer">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button  @click="oncancel">取消</el-button>
      </div>
    </el-dialog>
    <router-view/>
  </div>
</template>

<script>
export default {
  data(){
    return{
      currentPage1: 5,
      dialogVisible:false,
      ruleForm:{},
      companyList:[],
      companyProject:[],
      rules: {
        companyName: [
          { required: true, message: '请选择需要投诉的公司', trigger: 'change' }
        ],
        companyProject: [
          { required: true, message: '请选择涉及的项目', trigger: 'change' }
        ],
        companyDescribe: [
          { required: true, message: '请描述过程', trigger: 'change' }
        ],

      }
    }

  },
methods:{
  handleSelect(){
    console.log(111,this)
  },
  //投诉提交
  onSubmit(){
    this.$refs.ruleForm.validate(res=>{
      console.log(res)
      if(res){
      //   //发送请求
      //   this.$ajax({}).then(res=>{
      //    console.log(res)
      //   this.$message.success('提交成功，工作人员进行调查')
      //   this.$refs.ruleForm.resetFields()
      //   this.dialogVisible = false
      //   }).catch()

      }

    })

  },
  //投诉取消
  oncancel(){
    this.$refs.ruleForm.resetFields()
    this.dialogVisible = false
  },
  //退出登录
  returnfunc(){
    console.log(1199991)
    this.$router.push('/')
    //释放浏览器缓存
    sessionStorage.clear()
  },
  // 跳转到个人详情页
  peopleCenterFunc(){
   this.$router.push({
     name: 'people-center'
   })
  }
}
}
</script>

<style lang="less" scoped>
  .indexStyle{
    width: 100%;
    height: 100%;
    /*background-color: red;*/
  }
.logo{

  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translate(0,-50%);
  img{
    width: 100%;
    height: 100%;
  }
}
.name{
  width: 100px;
  height: 54px;
  // border-radius: 50%;
  // overflow: hidden;
  position: absolute;
  right: 100px;
  top: 50%;
  transform: translate(0,-50%);
}
.test{
  /*background-color: red;*/
}
  /deep/ .el-textarea{
    .el-textarea__inner{
      /*background-color: skyblue;*/
      min-height: 100px !important;
    }
  }
  /deep/ .el-form-item__label{
    width: 150px!important;
  }
  .buttongroup{
padding-left: 8%;
  }
</style>
